<template>
  <div class="deposit-container">
    <h2>存款界面</h2>
    <div class="container">
      <el-form class="deposit-form" :model="form" ref="form" label-width="100px">
        <el-form-item label="选择账号" style="margin: 50px 0">
          <el-select v-model="form.cardID"
                     size="large"
                     placeholder="请选择要存款的账号">
            <el-option
                v-for="item in accounts"
                :key="item.cardID"
                :label="item.cardID"
                :value="item.cardID">
              <div style="display: flex;justify-content: space-between;">
                <span><el-tag>{{ item.cardID }}</el-tag></span>
<!--                <span style="color: #8492a6; font-size: 13px" v-if="item.cardType=='信用卡'"><el-tag-->
<!--                    color="#aff0af">{{ item.cardType }}</el-tag></span>-->
<!--                <span style="color: #8492a6; font-size: 13px;" v-else><el-tag color="#152d64">{{-->
<!--                    item.cardType-->
<!--                  }}</el-tag></span>-->
                <span style="color: red; font-size: 18px;margin-left: 10px">{{ item.balance }}</span>
              </div>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="存款金额">
          <el-input-number v-model.number="form.balance"
                           :step="200"
                           type="number"
                           :max="10000"
                           :min="200"
                           placeholder="请输入存款金额">
          </el-input-number>
        </el-form-item>

        <el-form-item style="margin: 50px 0">
          <el-button type="primary" @click="deposit">存款</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="echarts">
        <div ref="main" style="width: 500px;height: 400px;overflow: hidden;"></div>
      </div>
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "AddMoney",
  data() {
    return {
      user: JSON.parse(window.localStorage.getItem("user")),
      form: {
        cardID: null,
        balance: null,
      },
      accounts: [],
      chartInstance: "",
      CardIDData: "",
      balanceData: ""
    };
  },
  mounted() {
    this.initData()
    // this.initChart()

    this.initCardInfo()
  },
  methods: {
    initData() {
      let id = this.user[0].customerID;
      this.getRequest(`/api/card/allblance/${id}`).then(resp => {
        if (resp) {
          if (resp.code == 1) {
            this.CardIDData = resp.data.map(item => item.cardID);
            this.balanceData = resp.data.map(item => item.balance);
            this.initChart()
          }
        }
      })
    },
    initChart() {
      this.chartInstance = echarts.init(this.$refs.main);
      const initOption = {
        xAxis: {
          type: 'category',
          name: "卡号",
          data: this.CardIDData,
          axisLabel: {
            interval: 0,
          },
          axisTick: {
            alignWithLabel: true
          }
        },

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
        },
        yAxis: {
          name: "存款",
          type: 'value'
        },
        series: [
          {
            name: '余额',
            barWidth: '60%',
            data: this.balanceData,
            type: 'bar'
          }
        ]
      }
      this.chartInstance.setOption(initOption)
    },
    initCardInfo() {
      let id = this.user[0].customerID
      this.getRequest(`/api/card/user/${id}`).then(resp => {
        if (resp) {
          if (resp.code == 1) {
            this.accounts = resp.data;
          }
        }
      })
    },
    deposit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.putRequest("/api/card/plus", this.form).then(resp => {
            if (resp) {
              if (resp.code == 1) {
                this.$message.success("存款成功");
                this.initCardInfo();
                this.initData()
              }
            }
          })
          this.resetForm();
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    },
  }
}

</script>

<style scoped>

h2 {
  text-align: center;
  margin-bottom: 30px;
}

.container {
  display: flex;
  justify-content: space-around;
}
</style>